<template>
  <div class="main">
    <div class="lt" ref="lt">
      <img
        @click="checkPlay"
        ref="pic"
        src="../assets/imgs/banner.jpg"
        alt=""
      />
      <p class="progress" ref="progress"></p>
      <audio ref="audio" :src="audio" @ended="handleImg"></audio>
    </div>
    <div class="rt">
      <h3>热门留言</h3>
      <div class="list">
        <p v-for="v in hotDesc" :key="v.time">
          <img :src="v.user.avatarUrl" alt="" />
          <a href="#" class="nickname">{{ v.user.nickname }}</a>
          <span class="content">{{ v.content }}</span>
          <span>{{ v.time | format }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import req from '../untils/request'
import moment from 'moment'
export default {
  data() {
    return {
      audio: '',
      flag: true,
      hotDesc: [],
      timer: null
    }
  },
  created() {
    this.getCurrentAudio()
    this.getCurrentDesc()
  },
  methods: {
    async getCurrentAudio() {
      const { code, data } = await req.get('/song/url', {
        id: this.$route.query.id
      })
      if (code === 200) {
        this.audio = data[0].url
      }
    },
    async getCurrentDesc() {
      const { code, hotComments } = await req.get('/comment/hot', {
        id: this.$route.query.id,
        type: 0
      })
      if (code === 200) {
        this.hotDesc = hotComments
      }
    },
    progress() {
      const totalTime = this.$refs.audio.duration
      const totalWidth = this.$refs.lt.clientWidth
      this.timer = setInterval(() => {
        const currentTime = this.$refs.audio.currentTime
        console.log(currentTime)
        this.$refs.progress.style.width =
          (totalWidth * currentTime) / totalTime + 'px'
      }, 500)
    },
    checkPlay() {
      if (this.flag) {
        this.$refs.pic.style.animationPlayState = 'running'
        this.$refs.audio.play()
        this.flag = false
        this.progress()
      } else {
        this.$refs.pic.style.animationPlayState = 'paused'
        this.$refs.audio.pause()
        this.flag = true
        clearInterval(this.timer)
      }
    },
    handleImg() {
      this.$refs.pic.style.animationPlayState = 'paused'
      clearInterval(this.timer)
    }
  },
  filters: {
    format(str) {
      return moment(str).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
<style lang="less" scoped>
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate((360deg));
  }
}

.main {
  width: 1200px;
  margin: 0 auto;
  .lt {
    width: 400px;
    height: 400px;
    border: 1px solid greenyellow;
    box-sizing: border-box;
    text-align: center;
    img {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      margin-top: 30px;
      cursor: pointer;
      animation: rotate 10s linear infinite;
      animation-play-state: paused;
    }
    audio {
      display: none;
    }
  }
}

.list {
  p {
    display: flex;
    align-items: center;
    margin: 40px 0;

    a {
      width: 170px;
      text-decoration: none;
      margin-left: 20px;
      color: blue;
    }

    .content {
      width: 700px;
      margin-right: 50px;
      line-height: 30px;
    }
  }
  img {
    width: 80px;
    height: 80px;
  }
}

.progress {
  width: 0;
  height: 15px;
  background-color: red;
}
</style>
